<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org/">
<head>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet"
          integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.0/font/bootstrap-icons.css">
    <meta charset="UTF-8">
    <title>发起交易</title>
</head>
<body>
<header class="px-3 py-2 bg-dark text-white">
    <div class="container">
        <div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start">
            <a href="index.html"
               class="d-flex align-items-center my-2 my-lg-0 me-lg-auto text-white text-decoration-none">
                <img src="img/icon.png" alt="icon" width="220" height="50">
            </a>
            <ul class="nav col-12 col-lg-auto my-2 justify-content-center my-md-0 text-small">
                <li>
                    <a href="init.html" class="nav-link text-white">
                        <i class="bi bi-diagram-2"></i>
                        <b>初始化</b>
                    </a>
                </li>
                <li>
                    <a href="allUsers.html" class="nav-link text-white">
                        <i class="bi bi-people"></i>
                        <b>查看所有账户</b>
                    </a>
                </li>
                <li>
                    <a href="transaction.html" class="nav-link text-white">
                        <i class="bi bi-cart-check"></i>
                        <b>发起交易</b>
                    </a>
                </li>
            </ul>
        </div>
    </div>
</header>
<div class="container">
    <main>
        <div class="py-4 text-center" style="background-color: #98fb98; border-radius: 6px; margin-top: 10px">
            <h2>发起交易</h2>
            <p class="lead">请填写交易发起方、接受方、交易金额的信息，后台将为您添加到交易池中并等待提交。</p>
        </div>
        <div class="row g-5">
            <div class="col-md-7 col-lg-8">
                <h4 class="mb-3">交易信息</h4>
                <form class="needs-validation was-validated" novalidate="" action="/trade" method="post">
                    <div class="row g-3">
                        <div class="col-sm-6">
                            <label for="sender" class="form-label">发起方地址</label>
                            <input type="text" name="sender" class="form-control" id="sender" placeholder="发起方地址"
                                   required="">
                            <div class="invalid-feedback">
                                请填写发起方地址！
                            </div>
                        </div>

                        <div class="col-sm-6">
                            <label for="recipient" class="form-label">接受方地址</label>
                            <input type="text" name="recipient" class="form-control" id="recipient" placeholder="接受方地址"
                                   required="">
                            <div class="invalid-feedback">
                                请填写接受方地址
                            </div>
                        </div>

                        <div>
                            <div class="col-sm-6" style="float: left; width: 415px">
                                <label for="value" class="form-label">交易金额</label>
                                <input type="text" name="value" class="form-control" id="value" placeholder="交易金额"
                                       required="">
                                <div class="invalid-feedback">
                                    请填写交易金额！
                                </div>
                            </div>

                            <div style="float: left">
                                <button class="btn btn-primary" style="margin-top: 30px; margin-left: 17px"
                                        type="submit">提交
                                </button>
                            </div>
                        </div>
                        <div>
                            <table>
                                <tr>
                                    <th>交易单号</th>
                                    <th th:text="${transactionInfo.getId()}"></th>
                                </tr>
                                <tr>
                                    <th>交易发起人</th>
                                    <th th:text="${transactionInfo.getSenderString()}"></th>
                                </tr>
                                <tr>
                                    <th>交易接收人</th>
                                    <th th:text="${transactionInfo.getRecipientString()}"></th>
                                </tr>
                                <tr>
                                    <th>交易金额</th>
                                    <th th:text="${transactionInfo.getValue()}"></th>
                                </tr>
                            </table>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </main>
</div>
<script src="form-validation.js"></script>
</body>
</html>

